<template>
  <div class="app-container">
    <eHeader :query="query"/>
    <!--列表-->
    <el-table v-loading="loading" :data="data" highlight-current-row style="width: 100%;" @selection-change="selsChange">
      <el-table-column type="index" label="序号" width="55">
        <template slot-scope="scope">
          <span>{{ scope.$index+(page - 1) * size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="courseName" label="课程名称" min-width="220">
        <template slot-scope="scope">
          <span>{{ scope.row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="categoryName" label="课程分类" min-width="100"/>
      <el-table-column prop="typeTxt" label="类型" min-width="80"/>
      <el-table-column :formatter="chargeFormatter" prop="chargeMethod" label="收费方式" min-width="80"/>
      <el-table-column prop="price" label="课程定价(元)" width="140"/>
      <el-table-column prop="period" label="单节时长(分钟)" width="120"/>
      <el-table-column prop="remark" label="简介" min-width="180"/>
      <el-table-column label="状态" sortable>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success">{{ scope.row.statusTxt }}</el-tag>
          <el-tag v-if="scope.row.status == 0" type="danger">{{ scope.row.statusTxt }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" min-width="140">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120px" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-permission="['ADMIN', 'COURSE_ALL', 'COURSE_EDIT']"
            type="text"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <em class="block-col"/>
          <el-button v-if="scope.row.status == 1" type="text" @click="handleDisable(scope.$index, scope.row)">停用</el-button>
          <el-button v-if="scope.row.status == 0" type="text" @click="handleEnable(scope.$index, scope.row)">启用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { parseTime } from '@/utils/index'
import eHeader from './module/header'
import elForm from './module/form'
import { switchStatus } from '@/api/course'
export default {
  components: { eHeader, elForm },
  mixins: [initData],
  data() {
    return {
      sels: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    beforeInit() {
      this.url = 'course/list'
      const sort = 'sort,asc'
      this.params = {
        page: this.page,
        size: this.size,
        sort: sort
      }
      const query = this.query
      const name = query.name
      if (name) { this.params['name'] = name }
      return true
    },
    chargeFormatter: function(row, column) {
      return row.chargeMethod === 1 ? '课时' : row.chargeMethod === 2 ? '学期' : row.chargeMethod === 3 ? '月' : '未知'
    },
    handleEdit: function(index, row) {
      Object.assign(this.$refs.form.form, row)
      this.$refs.form.listCategory()
      this.$refs.form.dialog = true
    },
    // 停用/启用
    handleEnable: function(index, row) {
      this.$confirm('确认启用该课程吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const para = {
          courseId: row.id,
          status: 1
        }
        switchStatus(para).then(() => {
          this.$message({
            message: '启用课程成功',
            type: 'success'
          })
          this.init()
        })
      })
    },
    handleDisable: function(index, row) {
      this.$confirm('确认停用该课程吗？', '提示', {
        type: 'warning'
      }).then(() => {
        const para = {
          courseId: row.id,
          status: 0
        }
        switchStatus(para).then(() => {
          this.$message({
            message: '停用课程成功',
            type: 'success'
          })
          this.init()
        })
      })
    },
    selsChange: function(sels) {
      this.sels = sels
    }
  }
}
</script>

<style src="@riophae/vue-treeselect/dist/vue-treeselect.min.css"></style>
<style scoped>
</style>
